<style>
    button {
        margin-right: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
    }

    button:hover {
        background-color: #45a049;
    }
</style>

<div>
    <div>
        <button>新增</button>
        <button>删除</button>
        <button>修改</button>
        <button>查询</button>
        <button>导出</button>
        <button>导入</button>
        <button>刷新</button>
    </div>

    <div id="myGrid" style="height: 500px;width: 100%"></div>
</div>


<script src="/javascripts/ag-grid-community.min.js"></script>
<script src="/javascripts/table/custom-tag.js"></script>
<script src="/javascripts/table/custom-link.js"></script>
<script>
    // agGrid.provideGlobalGridOptions({
    //     theme: "legacy",
    // })
    // Grid Options: Contains all of the Data Grid configurations
    const gridOptions = {
        localeText: {
            noRowsToShow: '无显示行',
        },
        theme: agGrid.themeBalham, // 需要 小心 Dark Reader 浏览器插件之间的 css 样式冲突
        // Row Data: The data to be displayed.
        rowData: [
            { name: "张三", age: "18", sex: "男", address: "北京" },
            { name: "李四", age: "19", sex: "女", address: "上海" },
            { name: "王五", age: "20", sex: "男", address: "广州" },
        ],
        // Column Definitions: Defines the columns to be displayed.
        columnDefs: [
            { field: "name", headerName: "姓名", },
            { field: "age", headerName: "年龄", },
            { field: "sex", headerName: "性别", },
            { field: "address", headerName: "地址", },
        ]
    };

    // Your Javascript code to create the Data Grid
    const myGridElement = document.querySelector('#myGrid');
    let gridApi = agGrid.createGrid(myGridElement, gridOptions);

</script>